<template>
  <div class="my_container margin_auto">
    <div >

<!-- <novelX  v-for="  item  in    historyarr"   :key="item.id"  :novelitem = "item" >  <p  style="font-size: 0.5rem;">  {{item.speedOfProgress}} </p> </novelX> -->
<CardBook  v-for="  item  in    mybook"   :key="item.id"  :novelitem = "item" >  <p  style="font-size: 0.5rem;">  {{item.speedOfProgress}} </p> </CardBook>
<!-- <CardBook  v-for="  item  in    2"   :key="item.id"   >  <p  style="font-size: 0.5rem;"> 12% {{item.speedOfProgress}} </p> </CardBook> -->

</div>
    <!-- <div v-show="isShow" class="selectBook">
      <div @click="checkAll">
        <van-checkbox v-model="isChecked" checked-color="#ed424b" icon-size="18"
          >全选</van-checkbox
        >
      </div>
      <h4>共{{ group.length }}本</h4>
      <div @click="editEvent">取消</div>
    </div> -->
    <!-- <ul v-show="!isShow && isLogin" class="top_uls">
      <li>
        <h5 @click="showDefault">
          <div class="ellipsis-line-1">{{ groupName }}({{ group.length }})</div>
          <van-icon
            color="#33373d"
            class-prefix="iconfont icon-xiala"
            size="1"
          ></van-icon>
        </h5>
        <div @click="showTime" class="readTime">
          {{ Time }}<van-icon class-prefix="iconfont icon-paixu"></van-icon>
        </div>
      </li>
      <li @click="editEvent">编辑</li>
    </ul> -->
         <!-- 书架列表 -->
    <!-- <div class="bookList" v-show="group.length && isLogin">
 
      <recordLi
        v-show="!isShow"
        :item="item"
        v-for="(item, index) in group"
        :key="index"
      >
        <template #left>
          <img class="img" :src="item.img" alt="" />
        </template>
        <template #text>
          <p>
            <van-icon name="contact" />
            <span
              >{{ item.author }} | 尚未阅读
              {{ $store.getters.bookrackLength }}</span
            >
          </p>
        </template>
        <template #left_bottom>
          <van-icon color="#ed424b" round name="stop" />更新至
          {{ item.upArticle }}
        </template>
        <template #right_bottom>
          {{ $fromDate(item.oldTime) }}
        </template>
        <template #top_right> 立即阅读 </template>
      </recordLi>
      <van-checkbox-group v-model="checked" ref="checkboxGroup">
   编辑的书架列表 -->
        <!-- <recordLi
          v-show="isShow"
          @selectEvent="selectEvent(index)"
          :item="item"
          v-for="(item, index) in group"
          :key="index"
        >
          <template #left>
            <div class="checkbox">
              <van-checkbox
                v-show="isShow"
                :name="index"
                checked-color="#ed424b"
                icon-size="18"
              ></van-checkbox>
            </div>
            <img class="img" :src="item.img" alt="" />
          </template>
          <template #text>
            <p>
              <van-icon name="contact" />
              <span>{{ item.author }} | 尚未阅读</span>
            </p>
          </template>
          <template #left_bottom>
            <van-icon color="#ed424b" round name="stop" />更新至
            {{ item.upArticle }}
          </template>
          <template #right_bottom>
            {{ $fromDate(item.oldTime) }}
          </template>
          <template #top_right> 立即阅读 </template>
        </recordLi>
      </van-checkbox-group> -->
    <!-- </div> --> 
    <!-- <div v-show="!group.length&&isLogin">
      <comEmpty
        :description="
          groupName == '默认书架'
            ? groupName + '是空的'
            : groupName + '的书架是空的'
        "
      >
        <template #image>
          <van-icon size="155" color="#c0c5cc" name="description"></van-icon>
        </template>
      </comEmpty>
    </div> -->

    <!-- <comEmpty :isbtn="true" :description="'你还没有登录 去登录一下吧!'" v-show="!isLogin"></comEmpty> -->
      <!-- <li>默认书架({{group.length}})</li> -->
    <!-- <van-popup
      v-model="showPopup"
      position="bottom"
      :style="{ height: $store.getters.bookrackLength * 6 + '%' }"
    >
      <ul class="uls_bottom flex_column_fff">
  
        <li
          @click="switchTo(key)"
          class="display-justify-s-b"
          v-for="(item, key, i) in bookrackArr"
          :key="i"
        >
          <div>{{ key }}({{ item.group.length }})</div>
          <van-icon v-show="groupName == key" color="#e5353e" name="success" />
        </li>
      </ul>
    </van-popup> -->

    <!-- <van-popup
      v-model="showPopupTime"
      position="bottom"
      :style="{ height: '12%' }"
    >
      <ul class="uls_bottom_time">
        <li
          @click="selectTime(item)"
          class="display-justify-s-b"
          v-for="(item, index) in rankTimeArr"
          :key="index"
        >
          <div>{{ item }}</div>
          <van-icon v-show="Time == item" color="#e5353e" name="success" />
        </li>
      </ul>
    </van-popup> -->
    <!-- <van-popup
      :overlay="false"
      v-model="isLength"
      position="bottom"
      :style="{ height: '6%' }"
    >
      <ul class="del_bottom">
        <li class="display_flex_center" @click="moveEvent">
          <van-icon class-prefix="iconfont icon-yidong" size="15"></van-icon>
          移动至
        </li>
        <li class="display_flex_center" @click="delEvent">
          <van-icon color="#f0636a" size="15" name="delete-o" />删除({{
            checked.length
          }})
        </li>
      </ul>
    </van-popup> -->

    <!-- 新建分组 -->
    <!-- <van-popup
      v-model="showGroup"
      position="bottom"
      :style="{ height: $store.getters.bookrackLength * 6 + '%' }"
    >
      <ul class="uls_group flex_column_fff">
        <li @click="groupEvent" class="flex_align">
          <van-icon color="#e5353e" name="plus" />新建分组
        </li>
        <li
          @click="saveEvent2(key)"
          v-for="(item, key, i) in bookrackArr"
          :key="i"
          class="flex_align"
        >
          <van-icon name="description" />{{ key }}({{ item.group.length }})
        </li>
      </ul>
    </van-popup> -->
    
    <!-- <van-popup v-model="showText" position="bottom" :style="{ height: '25%' }">
      <ul class="group_text">
        <li class="text_top flex_between">
          <div>取消</div>
          <div @click="saveEvent">保存</div>
        </li>
        <li class="text_bottom">
          <van-field
            v-model="message"
            rows="2"
            autosize
            type="textarea"
            show-word-limit
          />
        </li>
      </ul>
    </van-popup> -->
    <!-- <van-button @click="Addbookrack" type="danger">添加小说到书架</van-button> -->
  </div>
</template>

<script>
import Vue from 'vue'
import { Toast, Dialog } from "vant";
import { getmybook } from '@/api/home'
Vue.use(Toast);
Vue.use(Dialog);
import comEmpty from '@com/com/empty.vue'
export default {
  data() {
    return {
      mybook:[],
      message: "",
      // 分组名称的的弹框
      showText: false,
      // 点击编辑的弹框
      isShow: false,
      checked: [],
      // 底部展示共有多少组的弹框
      showPopup: false,
      // 底部展示 选择时间的弹框
      showPopupTime: false,
      rankTimeArr: ["阅读时间", "更新时间"],
      // 新建分组的弹框
      showGroup: false,
    };
  },
  created(){
      this.getbook()
  },
  computed: {
    isLogin() {   return true },//return localStorage.getItem("token");

    groupName() { return this.$store.state.groupName;   },

    isChecked: { get() {   return this.checked.length == this.group.length&&this.group.length ? true : false;  }, set(val) {}, },

    isLength: {get() { return this.checked.length > 0 ? true : false; }, set(val) {},  },

    group() { return this.bookrackArr[this.groupName].group; },
    
    bookrackArr() { return this.$store.state.bookrackArr; },

    Time() {return this.$store.state.rankTime; },
  },
  methods: {
    
   async getbook(){
    let {data}   =    await getmybook()
  
    var booklist = data.book.map( v=>{
          return v.novelitem
    } )
    //  已购书籍目录
    console.log("已购书籍目录",booklist);
    this.mybook = booklist

    },

    Addbookrack(){
      this.$store.commit('AddbookRack',{titleId:Date.now(),title:'斗破苍穹'+Date.now(),author:`${Date.now()}:1527`,upArticle:'完结',img:'https://bookcover.yuewen.com/qdbimg/349573/3681560/90',oldTime:Date.now()})
    },
    switchTo(key) {
      this.$store.state.groupName = key;
      this.showPopup = false;
    },

    savegroup(groupName, checked) {
      if (groupName != "") {
        let result = checked.map((v) => this.group[v]);
        this.$store.commit("Addgrouping", { groupName, group: result });
        this.showText = false;
        this.showGroup = false;
        this.isShow = false;
        this.checked = [];
        this.length;
      } else {
        this.$toast("组名不为空");
      }
    },
    saveEvent() {
      this.savegroup(this.message, this.checked);
    },
    saveEvent2(key) {
      this.savegroup(key, this.checked);
    },

    groupEvent() {
      this.showText = true;
    },
    moveEvent() {
      this.showGroup = true;
    },
    delEvent() {
      this.$dialog
        .confirm({
          title: "确定删除吗?",
          confirmButtonColor: "#ed424b",
        })
        .then((res) => {
          this.$store.commit("deleteMybook", this.checked);
        });
    },
    // 复选框事件
    checkAll() {
      if (!this.isChecked) {
        this.$refs.checkboxGroup.toggleAll(true);
      } else {
        this.checked = [];
      }
    },
    selectEvent(index) {
      let i = this.checked.findIndex((v) => v == index);
      if (i >= 0) {
        this.checked.splice(i, 1);
      } else {
        this.checked.push(index);
      }
    },
    editEvent() {
      this.checked = [];
      this.isShow = !this.isShow;
    },
    selectTime(text) {
      this.$store.commit("setRankTime", text);
      this.showPopupTime = false;
    },
    showTime() {
      this.showPopupTime = true;
    },
    showDefault() {
      this.showPopup = true;
    },
  },
  components:{
    comEmpty
  }
};
</script>

<style lang="scss" scoped>
.my_container {
  // width: 12rem;
  font-size: 0.5rem;
  // padding: 0 15px;
  .selectBook {
    width: 12rem;
    padding: 15px;
    position: fixed;
    right: 0;
    left: 0;
    top: 0;
    margin: 0 auto;
    z-index: 100000 !important;
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    div {
      &:nth-child(2) {
        flex: 1;
      }
    }
  }
  .top_uls {
    padding: 5px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    li {
      &:nth-child(1) {
        display: flex;
        align-items: center;
        font-size: 0.6rem;
        h5 {
          display: flex;
          width: 230px;
          transform: scale(0.85);
          transform-origin: center;
        }
      }
      &:nth-child(2) {
        font-size: 0.43rem;
      }
    }
    .readTime {
      font-size: 0.4rem;
      color: #42a5f4;
    }
  }
  .bookList {
    margin-top: 10px;
    .img {
      margin-right: 8px;
      width: 60px;
      height: 80px;
    }
    .checkbox {
      margin-right: 10px;
    }
  }
  .uls_bottom {
    font-size: 0.43rem;
    height: 100%;
    padding: 0 15px;
    li {
      flex: 1;
    }
  }
  .uls_bottom_time {
    font-size: 0.45rem;
    height: 100%;
    padding-left: 10px;
    li {
      padding: 10px 10px 10px 0;
      &:first-child {
        border-bottom: 1px solid rgb(230, 230, 230);
      }
    }
  }
  .del_bottom {
    font-size: 0.45rem;
    height: 100%;
    padding: 0 10px;
    display: flex;
    li {
      flex: 1;
      text-align: center;
      line-height: 100%;
      &:last-child {
        color: #ed424b;
      }
    }
  }
  .uls_group {
    font-size: 0.4rem;
    height: 100%;
    padding: 0 20px;
    li {
      flex: 1;
      &:nth-child(1) {
        color: #ed424b;
      }
    }
  }
  .group_text {
    font-size: 0.4rem;
    position: relative;
    overflow: hidden;

    .text_top {
      padding: 10px;
      border-bottom: 1px solid #f0f0f0;
      div {
        &:last-child {
          color: #ed424b;
        }
      }
    }
    .text_bottom {
      height: 135px;
      overflow-x: hidden;
      overflow-y: scroll;
    }
  }
}
::v-ddep .van-overlay {
  z-index: 3000000000 !important;
}
</style>
